<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框关键字</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/layer/3.5.1/mobile/layer.min.js" />
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 350px;
            height: 35px;
            margin: 100px auto;
        }

        .box input {
            width: 100%;
            height: 100%;
            font-size: 20px;
        }

        ul {
            padding: 5px 0;
        }

        li {
            list-style-type: none;
            padding: 2px 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" id="search" autocomplete="off" placeholder="请输入内容进行搜索">
        <ul id="list"></ul>
    </div>

    <script src="./js/axios.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/3.5.1/layer.min.js"></script>
    <script>
        let searchEle = document.getElementById('search');
        let listEle = document.getElementById('list');

        //绑定内容改变事件 
        searchEle.addEventListener('input', async function () {
            // 获取输入框输入的数据
            let word = this.value;

            // 优化：
            // 输入框内为空字符不需要发请求且无数据显示，不执行下一步，减少服务器压力
            if (!word) {
                listEle.innerText = '';
                return;
            };

            // 发送get请求
            // 输入框输入的数据与查询字符串匹配
            let { data } = await axios({
                method: 'get',
                url: 'http://192.168.218.1:5522/search?word=' + word,
            });

            // 优化：
            //输入的数据没有匹配的，给用户提示（没有匹配的是返回空数组，长度为0）
            if (data.length === 0) {
                // 给用户提示
                layer.msg('暂无匹配', { icon: 2 });
                // 并无数据显示，不执行下一步
                listEle.innerText = '';
                return;
            };

            //遍历循环服务器内的数据显示到页面中
            let str = '';
            data.forEach((item) => {
                let { title } = item;
                str += `<li>${title}</li>`;
            });
            listEle.innerHTML = str;
        });
    </script>
</body>

</html>